/* ==========================================================================
   FILTERS
   ========================================================================== */

.filter {
    @apply bg-gray-200 mb-6 rounded-full text-center;
    padding: 10px 8px 14px;

    a {
        @apply text-xs text-gray-700 mx-1 p-2 relative;
    }

    a.active, a:hover {
        @apply text-gray-950;
    }

    a.active:after {
        @apply bg-red-500 block;
        content: "";
        width: 4px;
        height: 4px;
        border-radius: 50%;
        opacity: .9;
        position: absolute;
        left: 50% ; [dir="rtl"] & { left: auto ; right: 50% ; }
        margin-left: -1px ; [dir="rtl"] & { margin-right: -1px ; margin-left: 0 ; }
        bottom: 1px;
    }

    a.no-dot:after {
        display: none;
    }

    a .icon {
        position: relative;
        top: 2px;
    }
}

.filter-fields {
    .form-group {
        @apply p-0 pb-4;

        &:last-child {
            @apply p-0;
        }
    }

    .text-fieldtype .input-text {
        @apply py-2 px-3;
    }

    .no-label.form-group,
    .no-label .form-group {
        @apply pb-2;

        &:last-child {
            @apply p-0;
        }

        .field-inner {
            @apply hidden;
        }
    }
}
